<template>
  <div class="crop-tool-container">
    <!-- 顶部导航 -->
    <div class="tool-header">
      <el-button type="text" @click="goBack" class="back-btn">
        <el-icon><ArrowLeft /></el-icon>
        返回首页
      </el-button>
      <h1 class="tool-title">图片裁切工具</h1>
      <p class="tool-description">批量裁切图片，支持统一裁切区域</p>
    </div>

    <!-- 主要内容区域 -->
    <div class="tool-content">
      <el-row :gutter="60">
        <!-- 左侧控制面板 -->
        <el-col :span="7">
          <el-card class="control-panel" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><Setting /></el-icon>
                <span>控制面板</span>
              </div>
            </template>

            <!-- 文件上传 -->
            <div class="upload-section">
              <el-upload 
                class="upload-demo" 
                drag 
                multiple
                :show-file-list="true"
                :before-upload="handleFileUpload"
                :on-remove="handleFileRemove"
                accept="image/*"
              >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">将图片拖拽到此处，或<em>点击上传</em></div>
                <template #tip>
                  <div class="el-upload__tip">支持多选上传jpg/png/gif文件，且每个文件不超过10MB</div>
                </template>
              </el-upload>
            </div>

            <!-- 裁切设置 -->
            <div class="crop-settings" v-if="imageUrl">
              <h3>裁切设置</h3>

              <!-- 裁切比例设置 -->
              <div class="setting-item">
                <label>裁切比例</label>
                <el-radio-group v-model="selectedRatio" @change="handleRatioChange">
                  <el-radio-button 
                    v-for="ratio in cropRatios" 
                    :key="ratio.value" 
                    :label="ratio.value"
                  >
                    {{ ratio.label }}
                  </el-radio-button>
                </el-radio-group>
              </div>

              <!-- 文件名设置 -->
              <div class="setting-item">
                <label>输出文件名</label>
                <el-input 
                  v-model="outputFilename" 
                  placeholder="文件名前缀"
                  size="default"
                >
                  <template #append>1.png</template>
                </el-input>
              </div>

              <!-- 操作按钮 -->
              <div class="action-buttons">
                <el-button 
                  type="primary" 
                  @click="applyCrop" 
                  size="large" 
                  class="action-btn"
                >
                  <el-icon><Crop /></el-icon>
                  应用到当前图片
                </el-button>
                <el-button 
                  type="primary" 
                  @click="applyCropToAll" 
                  size="large" 
                  class="action-btn" 
                  :loading="isProcessing"
                >
                  <el-icon><Crop /></el-icon>
                  {{ isProcessing ? '处理中...' : '应用到选中图片' }}
                </el-button>
                <el-button 
                  type="primary" 
                  @click="downloadImages" 
                  size="large" 
                  class="action-btn"
                >
                  <el-icon><Download /></el-icon>
                  下载图片
                </el-button>
                <el-button 
                  type="info" 
                  @click="resetCrop" 
                  size="large" 
                  class="action-btn"
                >
                  <el-icon><RefreshRight /></el-icon>
                  重置
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧预览区域 -->
        <el-col :span="17">
          <el-card class="preview-panel" shadow="hover">
            <div class="preview-content">
              <div v-if="!imageUrl" class="empty-preview">
                <el-icon class="empty-icon"><Picture /></el-icon>
                <p>请先上传图片</p>
              </div>
              <div v-else class="image-preview">
                <!-- 图片列表 -->
                <div class="image-list" v-if="imageList.length > 1">
                  <el-scrollbar>
                    <div class="image-list-inner">
                      <div
                        v-for="(img, index) in imageList"
                        :key="index"
                        class="image-item"
                        :class="{ active: index === currentImageIndex }"
                        @click="switchImage(index)"
                      >
                        <img :src="img.url" :alt="'图片' + (index + 1)" />
                        <div class="image-number">{{ index + 1 }}</div>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>

                <div class="preview-tabs">
                  <el-tabs v-model="activeTab" class="demo-tabs">
                    <el-tab-pane label="裁切预览" name="original">
                      <div class="image-container">
                        <Cropper
                          class="cropper"
                          :src="imageUrl"
                          :stencil-props="{
                            aspectRatio: selectedRatio || undefined
                          }"
                          :default-coordinates="coordinates"
                          @change="onChange"
                          ref="cropperRef"
                          :min-width="20"
                          :min-height="20"
                          image-restriction="stencil"
                          :resize-image="false"
                          :transitions="true"
                        />
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="效果预览" name="processed">
                      <div class="image-container">
                        <el-image 
                          v-if="processedImageUrl" 
                          :src="processedImageUrl" 
                          alt="处理后" 
                          class="preview-image"
                          :preview-src-list="[processedImageUrl]"
                          hide-on-click-modal
                        />
                        <el-image 
                          v-else 
                          :src="imageUrl" 
                          alt="原图" 
                          class="preview-image"
                          :preview-src-list="[imageUrl]"
                          hide-on-click-modal
                        />
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
  ArrowLeft, Setting, Picture, Upload, UploadFilled, 
  Download, RefreshRight, Crop
} from '@element-plus/icons-vue';
import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';

const router = useRouter();
const activeTab = ref('original');
const imageList = reactive([]); // 存储所有图片信息
const currentImageIndex = ref(0); // 当前显示的图片索引
const processedImages = reactive([]); // 存储所有处理后的图片
const isProcessing = ref(false);
const cropperRef = ref(null);

// 裁切相关状态
const cropRatios = [
  { label: '自由', value: 0 },
  { label: '1:1', value: 1 },
  { label: '4:3', value: 4/3 },
  { label: '3:4', value: 3/4 },
  { label: '16:9', value: 16/9 },
  { label: '9:16', value: 9/16 },
  { label: '3:2', value: 3/2 },
  { label: '2:3', value: 2/3 },
  { label: '5:4', value: 5/4 },
  { label: '4:5', value: 4/5 }
];

const outputFilename = ref('cropped');
const selectedRatio = ref(0);
const coordinates = ref(null);

// 计算属性
const imageUrl = computed(() => {
  return imageList[currentImageIndex.value]?.url || '';
});

const processedImageUrl = computed(() => {
  return processedImages[currentImageIndex.value] || '';
});

// 方法
const goBack = () => {
  router.push('/');
};

const handleFileUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    ElMessage.error('请上传图片文件!');
    return false;
  }

  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    ElMessage.error('图片大小不能超过 10MB!');
    return false;
  }

  // 创建文件预览URL
  const reader = new FileReader();
  reader.onload = (e) => {
    imageList.push({
      url: e.target.result,
      name: file.name
    });
    if (imageList.length === 1) {
      ElMessage.success('已上传第一张图片，请在图片上选择要裁切的区域');
    } else {
      ElMessage.success('图片上传成功!');
    }
  };
  reader.readAsDataURL(file);

  return false; // 阻止自动上传
};

const handleFileRemove = (file, fileList) => {
  const index = imageList.findIndex(img => img.name === file.name);
  if (index > -1) {
    imageList.splice(index, 1);
    processedImages.splice(index, 1);
    if (currentImageIndex.value >= imageList.length) {
      currentImageIndex.value = Math.max(0, imageList.length - 1);
    }
  }
};

const switchImage = (index) => {
  if (index >= 0 && index < imageList.length) {
    currentImageIndex.value = index;
    activeTab.value = processedImages[index] ? 'processed' : 'original';
  }
};

const onChange = (cropper) => {
  coordinates.value = cropper.coordinates;
};

const handleRatioChange = (ratio) => {
  selectedRatio.value = ratio;
  if (!cropperRef.value) return;
  
  if (!coordinates.value) return;
  
  // 计算新的尺寸，保持中心点不变
  let newWidth, newHeight;
  if (ratio === 0) {
    // 自由模式下保持当前尺寸
    newWidth = coordinates.value.width;
    newHeight = coordinates.value.height;
  } else {
    // 固定比例模式下，基于当前宽度计算高度
    newWidth = coordinates.value.width;
    newHeight = newWidth / ratio;
    
    // 获取图片显示区域的尺寸
    const imageElement = cropperRef.value.$el.querySelector('.vue-advanced-cropper__image');
    if (imageElement) {
      const imageRect = imageElement.getBoundingClientRect();
      
      // 如果高度超出图片，则基于高度计算宽度
      if (newHeight > imageRect.height) {
        newHeight = imageRect.height;
        newWidth = newHeight * ratio;
      }
      
      // 如果宽度超出图片，则基于宽度重新计算
      if (newWidth > imageRect.width) {
        newWidth = imageRect.width;
        newHeight = newWidth / ratio;
      }
    }
  }
  
  // 计算新的位置，保持中心点不变
  const centerX = coordinates.value.left + coordinates.value.width / 2;
  const centerY = coordinates.value.top + coordinates.value.height / 2;
  
  const newCoords = {
    width: newWidth,
    height: newHeight,
    left: centerX - newWidth / 2,
    top: centerY - newHeight / 2
  };

  // 确保裁切框不会超出图片边界
  const imageElement = cropperRef.value.$el.querySelector('.vue-advanced-cropper__image');
  if (imageElement) {
    const imageRect = imageElement.getBoundingClientRect();
    const cropperRect = cropperRef.value.$el.getBoundingClientRect();
    
    // 计算图片相对于裁切器的位置
    const imageLeft = imageRect.left - cropperRect.left;
    const imageTop = imageRect.top - cropperRect.top;
    
    // 调整位置确保不超出边界
    newCoords.left = Math.max(imageLeft, Math.min(newCoords.left, imageLeft + imageRect.width - newWidth));
    newCoords.top = Math.max(imageTop, Math.min(newCoords.top, imageTop + imageRect.height - newHeight));
  }
  
  // 应用新的坐标
  coordinates.value = newCoords;
};

const applyCrop = async (showMessage = true) => {
  if (!cropperRef.value || !coordinates.value) {
    ElMessage.warning('请先选择裁切区域');
    return;
  }

  try {
    const canvas = cropperRef.value.getCanvas();
    if (!canvas) {
      ElMessage.error('获取裁切数据失败');
      return;
    }

    const url = await new Promise(resolve => {
      canvas.toBlob(blob => {
        const url = URL.createObjectURL(blob);
        processedImages[currentImageIndex.value] = url;
        resolve(url);
      }, 'image/jpeg');
    });

    if (showMessage) {
      ElMessage.success('裁切成功');
    }
    activeTab.value = 'processed';
    return url;
  } catch (error) {
    console.error('裁切失败:', error);
    ElMessage.error('裁切失败');
    return null;
  }
};

const applyCropToAll = async () => {
  if (imageList.length === 0) {
    ElMessage.warning('请先上传图片');
    return;
  }

  // 保存当前选中的图片索引
  const originalIndex = currentImageIndex.value;
  isProcessing.value = true;

  try {
    // 先处理当前图片，获取裁切参数
    if (!coordinates.value) {
      ElMessage.warning('请先选择裁切区域');
      return;
    }

    // 弹出确认框
    await ElMessageBox.confirm(
      '是否要将当前裁切应用到所有已上传的图片？',
      '确认操作',
      {
        confirmButtonText: '应用到所有',
        cancelButtonText: '仅应用当前',
        type: 'warning',
      }
    ).then(async () => {
      // 保存当前图片的裁切参数（深拷贝）
      const originalCoordinates = JSON.parse(JSON.stringify(coordinates.value));
      
      // 清理并初始化processedImages数组
      processedImages.length = 0;
      for (let i = 0; i < imageList.length; i++) {
        processedImages.push(null);
      }
      
      // 为每张图片应用裁切
      for (let i = 0; i < imageList.length; i++) {
        try {
          // 切换到目标图片
          currentImageIndex.value = i;
          await nextTick();
          
          // 等待裁切器重新渲染
          await new Promise(resolve => setTimeout(resolve, 300));
          
          // 根据当前图片的尺寸调整裁切坐标
          if (cropperRef.value) {
            const imageElement = cropperRef.value.$el.querySelector('.vue-advanced-cropper__image');
            if (imageElement) {
              const imageRect = imageElement.getBoundingClientRect();
              const cropperRect = cropperRef.value.$el.getBoundingClientRect();
              
              // 计算图片相对于裁切器的位置
              const imageLeft = imageRect.left - cropperRect.left;
              const imageTop = imageRect.top - cropperRect.top;
              
              // 计算相对位置（百分比）- 使用原始坐标
              const relativeLeft = (originalCoordinates.left - imageLeft) / imageRect.width;
              const relativeTop = (originalCoordinates.top - imageTop) / imageRect.height;
              const relativeWidth = originalCoordinates.width / imageRect.width;
              const relativeHeight = originalCoordinates.height / imageRect.height;
              
              // 应用相对位置到当前图片
              const newCoordinates = {
                left: imageLeft + relativeLeft * imageRect.width,
                top: imageTop + relativeTop * imageRect.height,
                width: relativeWidth * imageRect.width,
                height: relativeHeight * imageRect.height
              };
              
              // 确保裁切框不超出图片边界
              newCoordinates.left = Math.max(imageLeft, Math.min(newCoordinates.left, imageLeft + imageRect.width - newCoordinates.width));
              newCoordinates.top = Math.max(imageTop, Math.min(newCoordinates.top, imageTop + imageRect.height - newCoordinates.height));
              
              // 确保最小尺寸
              newCoordinates.width = Math.max(20, newCoordinates.width);
              newCoordinates.height = Math.max(20, newCoordinates.height);
              
              // 更新坐标
              coordinates.value = newCoordinates;
              
              // 等待坐标更新生效
              await nextTick();
              
              // 应用裁切
              await applyCrop(false);
            } else {
              console.warn(`图片 ${i + 1} 的裁切器元素未找到`);
            }
          } else {
            console.warn(`图片 ${i + 1} 的裁切器引用未找到`);
          }
        } catch (error) {
          console.error(`处理图片 ${i + 1} 时出错:`, error);
          // 继续处理下一张图片
        }
      }
      
      ElMessage.success('批量裁切完成');
    }).catch(() => {
      // 用户选择仅应用当前
      applyCrop(true);
    });

    activeTab.value = 'processed';
  } catch (error) {
    console.error('裁切失败:', error);
    ElMessage.error('裁切失败');
  } finally {
    // 恢复到原来选中的图片
    currentImageIndex.value = originalIndex;
    isProcessing.value = false;
  }
};

const downloadImages = async () => {
  if (processedImages.length === 0) {
    ElMessage.warning('请先裁切图片');
    return;
  }

  ElMessageBox.prompt('请输入图片文件名前缀', '批量下载', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue: outputFilename.value,
    inputPattern: /^[a-zA-Z0-9_\-]+$/,
    inputErrorMessage: '文件名前缀只能包含字母、数字、下划线和连字符'
  }).then(({ value }) => {
    processedImages.forEach((url, index) => {
      if (url) {
        const a = document.createElement('a');
        a.href = url;
        a.download = `${value}_${(index + 1).toString().padStart(2, '0')}.png`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    });
    ElMessage.success('图片下载成功!');
  }).catch(() => {
    // 用户取消下载，不做任何操作
  });
};

const resetCrop = () => {
  imageList.length = 0;
  processedImages.length = 0;
  currentImageIndex.value = 0;
  outputFilename.value = 'cropped';
  selectedRatio.value = 0;
  activeTab.value = 'original';
  coordinates.value = null;
  ElMessage.info('已重置所有设置');
};

// 生命周期钩子
onMounted(() => {
  window.addEventListener('resize', () => {
    if (cropperRef.value) {
      cropperRef.value.refresh();
    }
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', () => {
    if (cropperRef.value) {
      cropperRef.value.refresh();
    }
  });
});
</script>

<style lang="scss" scoped>
.crop-tool-container {
  min-height: 100vh;
  width: 100%;
  background: #f0f0f0;
  padding: 40px 80px;
  overflow-x: hidden;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.tool-header {
  text-align: center;
  margin-bottom: 50px;
  position: relative;

  .back-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    padding: 20px 20px;
    background: #000;
    color: #fff;
    border: 3px solid #000;
    border-radius: 0;
    font-weight: bold;
    transition: all 0.2s ease;
    border-radius: 10px;

    .el-icon {
      margin-right: 8px;
    }

    &:hover {
      background: #fff;
      color: #000;
      transform: translateY(-50%) translateX(-5px) translateY(-5px);
      box-shadow: 5px 5px 0px #000;
    }
  }

  .tool-title {
    font-size: 42px;
    font-weight: 900;
    color: #000;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: -2px;
    text-shadow: 3px 3px 0px #ff6b6b;
  }

  .tool-description {
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: 500;
  }
}

.tool-content {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;

  .el-icon {
    margin-right: 10px;
    color: #ff6b6b;
    font-size: 18px;
  }
}

.control-panel {
  height: fit-content;
  background: #fff;
  border: 4px solid #000;
  border-radius: 0;
  box-shadow: 8px 8px 0px #000;

  :deep(.el-card__header) {
    padding: 25px 30px;
    border-bottom: 4px solid #000;
    background: #ff6b6b;
    color: #000;
  }

  :deep(.el-card__body) {
    padding: 30px;
  }

  .upload-section {
    margin-bottom: 40px;

    :deep(.el-upload-dragger) {
      border-radius: 0;
      border: 4px dashed #000;
      background: #fff;
      padding: 40px 20px;
      transition: all 0.2s ease;

      &:hover {
        border-color: #ff6b6b;
        background: #fff;
        transform: translateX(-3px) translateY(-3px);
        box-shadow: 6px 6px 0px #000;
      }

      .el-icon--upload {
        font-size: 48px;
        color: #000;
        margin-bottom: 20px;
      }

      .el-upload__text {
        font-size: 16px;
        color: #000;
        font-weight: 600;

        em {
          color: #ff6b6b;
          font-weight: 900;
        }
      }
    }

    :deep(.el-upload__tip) {
      font-size: 14px;
      color: #666;
      margin-top: 15px;
      font-weight: 500;
    }
  }

  .crop-settings {
    h3 {
      font-size: 18px;
      color: #000;
      margin-bottom: 25px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .setting-item {
      margin-bottom: 30px;

      label {
        display: block;
        font-weight: 900;
        margin-bottom: 15px;
        color: #000;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      :deep(.el-radio-group) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 100%;
        justify-content: center;
        padding: 0 10px;

        .el-radio {
          margin-right: 0;
          margin-bottom: 0;
        }
        
        :deep(.el-radio-button__inner) {
          padding: 12px 16px;
          width: 100%;
          text-align: center;
          border-radius: 0;
          border: 3px solid #000;
          background: #fff;
          color: #000;
          font-weight: 700;
          transition: all 0.2s ease;
        }
        
        :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
          background: #000;
          color: #fff;
          transform: translateX(-2px) translateY(-2px);
          box-shadow: 4px 4px 0px #ff6b6b;
        }
        
        :deep(.el-radio-button:first-child .el-radio-button__inner) {
          border-radius: 0;
        }
        
        :deep(.el-radio-button:last-child .el-radio-button__inner) {
          border-radius: 0;
        }
        
        :deep(.el-radio-button:not(:last-child)) {
          margin-right: 0;
        }
        
        :deep(.el-radio-button:not(:first-child) .el-radio-button__inner) {
          border-left: 3px solid #000;
          border-radius: 0;
        }
      }

      :deep(.el-input__wrapper) {
        border: 3px solid #000;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        
        &:hover {
          border-color: #ff6b6b;
        }
        
        &.is-focus {
          border-color: #000;
          box-shadow: 4px 4px 0px #ff6b6b;
        }
      }
    }

    .action-buttons {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: stretch;

      .action-btn {
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 20px;
        box-sizing: border-box;
        border: 4px solid #000;
        border-radius: 0;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.2s ease;

        &:hover {
          transform: translateX(-3px) translateY(-3px);
          box-shadow: 6px 6px 0px #000;
        }

        &.el-button--primary {
          background: #000;
          color: #fff;
          
          &:hover {
            background: #000;
            color: #fff;
          }
        }

        &.el-button--info {
          background: #fff;
          color: #000;
          
          &:hover {
            background: #fff;
            color: #000;
          }
        }

        :deep(.el-icon) {
          margin-right: 8px;
        }
      }
    }
  }
}

.preview-panel {
  min-height: 700px;
  margin-bottom: 30px;
  background: #fff;
  border: 4px solid #000;
  border-radius: 0;
  box-shadow: 8px 8px 0px #000;

  :deep(.el-card__body) {
    padding: 30px;
  }

  .preview-content {
    .empty-preview {
      text-align: center;
      padding: 150px 40px;
      color: #666;

      .empty-icon {
        font-size: 120px;
        margin-bottom: 30px;
        color: #000;
      }

      p {
        font-size: 18px;
        margin: 0;
        font-weight: 600;
      }
    }

    .image-preview {
      .image-list {
        margin-bottom: 20px;
        border-radius: 0;
        background: #f0f0f0;
        padding: 15px;
        border: 3px solid #000;
        
        .image-list-inner {
          display: flex;
          gap: 15px;
          padding: 5px;
          overflow-x: auto;
          
          .image-item {
            position: relative;
            flex: 0 0 100px;
            width: 100px;
            height: 100px;
            border-radius: 0;
            overflow: hidden;
            cursor: pointer;
            border: 3px solid #000;
            transition: all 0.2s ease;
            background: #fff;
            
            &:hover {
              transform: translateX(-3px) translateY(-3px);
              box-shadow: 6px 6px 0px #000;
            }
            
            &.active {
              border-color: #ff6b6b;
              box-shadow: 6px 6px 0px #ff6b6b;
            }
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            
            .image-number {
              position: absolute;
              top: 5px;
              right: 5px;
              background: #000;
              color: #fff;
              border-radius: 0;
              padding: 4px 8px;
              font-size: 12px;
              font-weight: 900;
            }
          }
        }
      }

      .preview-tabs {
        :deep(.el-tabs__header) {
          margin-bottom: 25px;
          border-bottom: 4px solid #000;

          .el-tabs__item {
            font-size: 16px;
            font-weight: 900;
            padding: 0 25px;
            height: 45px;
            line-height: 45px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 3px solid transparent;
            border-bottom: none;
            border-radius: 0;
            transition: all 0.2s ease;

            &.is-active {
              background: #000;
              color: #fff;
              border-color: #000;
            }

            &:hover {
              background: #f0f0f0;
              color: #000;
            }
          }
        }

        :deep(.el-tabs__content) {
          overflow: visible;
        }
      }

      .image-container {
        text-align: center;
        padding: 30px 20px;
        height: 800px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0f0f0;
        border-radius: 0;
        overflow: hidden;
        border: 3px solid #000;

        .cropper {
          width: 100%;
          height: 100%;
          background: #000;
          border-radius: 0;
          
          :deep(.vue-advanced-cropper__background) {
            background: #1e1e1e;
          }
          
          :deep(.vue-advanced-cropper__image) {
            border-radius: 0;
          }
          
          :deep(.vue-advanced-cropper__stencil-grid) {
            border: 3px solid #fff;
          }
        }

        .preview-image {
          max-width: 100%;
          max-height: 70vh;
          border-radius: 0;
          box-shadow: 8px 8px 0px #000;
          transition: all 0.2s ease;
          user-select: none;
          object-fit: contain;
          border: 3px solid #000;

          &:hover {
            transform: translateX(-3px) translateY(-3px);
            box-shadow: 11px 11px 0px #000;
          }
        }
      }
    }
  }
}

// 响应式内边距调整
@media (max-width: 1600px) {
  .crop-tool-container {
    padding: 40px 60px;
  }
}

@media (max-width: 1200px) {
  .crop-tool-container {
    padding: 30px 40px;
  }

  .tool-header {
    .back-btn {
      position: static;
      transform: none;
      margin-bottom: 20px;
    }

    .tool-title {
      font-size: 36px;
    }
  }

  .preview-panel {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .crop-tool-container {
    padding: 20px 15px;
  }

  .tool-header .tool-title {
    font-size: 28px;
  }

  .tool-content {
    :deep(.el-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    :deep(.el-col) {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
  }

  .control-panel,
  .preview-panel {
    :deep(.el-card__body) {
      padding: 20px;
    }
  }
}
</style> 